<template>
    <baseView>
        <div class="dayClean">
            <DataTableV2 :tableColumn="tableColumn" :size="[15, 20, 25]" :params="params" ref="tableRef"
                :fetchApi="DayOutput">
                <!-- 查询 -->
                <template #search>
                    <div class="form-box">
                        <el-form :inline="true">
                            <el-form-item label="路段名称">
                                <routeSelect v-model:selectValue="params.routeid"> </routeSelect>
                            </el-form-item>
                            <el-form-item label="商铺名称">
                                <el-input v-model="params.shopname" placeholder="请输入"></el-input>
                            </el-form-item>
                            <el-form-item label="日期">
                                <el-date-picker v-model="params.date" type="date" value-format="YYYY-MM-DD" />
                            </el-form-item>
                            <el-form-item>
                                <el-button type="primary" @click="searchTable">
                                    <el-icon style="margin-right: 2px;">
                                        <Search />
                                    </el-icon>查询
                                </el-button>
                                <el-button type="primary" plain @click="reset">重置</el-button>
                            </el-form-item>
                        </el-form>
                    </div>

                </template>

            </DataTableV2>
        </div>
    </baseView>

</template>

<script setup>
import { DayOutput } from "@/api/cleanCategory"
import dayjs from "dayjs"
const tableRef = ref(null)
const tableColumn = ref([
    {
        label: '路段名称',
        prop: 'routename',
        width:250
    },
    {
        label: '商铺名称',
        prop: 'shopname',
    },
    {
        label: '干垃圾',
        prop: "",
        children: [
            {
                label: '桶数(桶)',
                prop: 'dry'
            },
            {
                label: '重量(kg)',
                prop: 'dryweight'
            }

        ]
    },
    {
        label: '湿垃圾',
        prop: "",
        children: [
            {
                label: '桶数(桶)',
                prop: 'wet'
            },
            {
                label: '重量(kg)',
                prop: 'wetweight'
            }

        ]
    },
    {
        label: '餐厨垃圾',
        prop: "",
        children: [
            {
                label: '桶数(桶)',
                prop: 'food'
            },
            {
                label: '重量',
                prop: 'foodweight'
            }

        ]
    }
])
const params = ref({
    routeid: "",
    shopname: "",
    date: dayjs().format("YYYY-MM-DD"),
    pagenum: 1,
    pagesize: 15
})

function searchTable() {
    params.value.pagenum = 1
    tableRef.value.fetchList()
}

function reset() {
    params.value = {
        routeid: "",
        shopname: "",
        date: dayjs().format("YYYY-MM-DD"),
        pagenum: 1,
        pagesize: 15
    }
    nextTick(() => {
        searchTable()
    })
}


</script>

<style lang="scss" scoped>
.dayClean {
    height: 100%;
    position: relative;
}

.form-box {
    display: flex;
    justify-content: flex-end;
}
</style>